<template>
  <div >
    <transition name="fade">
      <div class="v-modal table-mask" v-if="showEdit"  @click="hiden"></div>
    </transition>
    <transition name="bf-horizontal" >
      <div class="bf-table-right-module"  v-if="showEdit" v-bind:style="{ width: width + 'px', left: left + 'px', right: right + 'px'  }">
        <div class="shadow-b clearfix bf-table-right-module-title">
          <div class="float-l"><span class="bar-l"></span>{{title?title:'编辑'}}</div>
          <div class="float-r" @click="hiden"><img src="../../../assets/beneform4j/home/icon_close.png" alt=""></div>
        </div>

        <div class="bf-table-right-form">
          <slot></slot>
          <div class="table-form-tabs clearfix border-b" v-if="showHistory">
            <div class="margin-r" @click="ActoggleTabs(1)" :class="toggleTabs == 1?'active':''">
              <span>详情</span>
            </div>
            <div class="margin-r" @click="ActoggleTabs(2)" :class="toggleTabs == 2?'active':''">
              <span>审批历史</span>
            </div>
          </div>

          <div v-if="toggleTabs == 1">
            <el-form ref="form" :model="form" :rules="editRules"  label-position="right" label-width="110px" class="clearfix">
              <div  v-for="item in editFormFilter" :key="item.field" v-if="!item.hideEdit" v-bind:style="{ width: item.onlyRow? 100 : 100/rowNum + '%' }" class="bf-table-form-item padding-l padding-r">
                <component v-if="!item.slot" v-bind:is="'bf-form-'+item.type" :form="form" :item="item" :disabled="item.disableEdit" :userId="userId" :rules="editRules"></component>
                <div class="margin-b">
                  <slot v-if="item.slot" :name="item.slot"></slot>
                </div>
              </div>
            </el-form>
          </div>

          <!-- 审批历史 -->
          <div v-if="toggleTabs == 2">
            <div v-if="historyData.length>0">
              <div v-for="item in historyData" :key="item.assignee" class="history-item">
                <div class="clearfix">
                  <div class="float-l">
                    <span class="padding-r">操作人:</span><span>{{item.userName}}</span>
                  </div>
                  <div class="float-r">
                    <span class="padding-r">任务名称:</span><span>{{item.actName}}</span>
                  </div>
                </div>
                <div>
                  <span class="padding-r">审批意见:</span><span>{{item.description}}</span>
                </div>
                <div>
                  <span class="padding-r">操作时间:</span><span>{{item.endTime}}</span>
                </div>
              </div>
            </div>

            <div v-if="historyData.length==0">
              <div class="history-nodata">
                <img src="../../../assets/beneform4j/ondata.png" alt="">
                <div class="text-c">暂无审批历史</div>
              </div>
            </div>
          </div>
        </div>

        <div class="bf-table-right-module-bottom shadow-t">
          <div v-if="!submitButtons">
            <el-button type="primary" @click="sure">{{actionTitle}}</el-button>
            <el-button @click="hiden">取消</el-button>
          </div>
          <div v-if="submitButtons">
            <el-button @click="doCustomEvent(item)" v-for="item in submitButtons" :key="item.title">{{item.title}}</el-button>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { getApproveHistory } from '../../api/common'
export default {
  name: 'bfTableForm',
  props: ['editForm', 'editRules', 'submitButtons', 'width', 'rowNum', 'title', 'showHistory', 'approveSetting', 'left', 'right'],
  data() {
    return {
      toggleTabs: 1,
      showEdit: false,
      form: {},
      actionTitle: '确定',
      userId: '',
      historyData: []
    }
  },
  methods: {
    ActoggleTabs(num) {
      this.toggleTabs = num
      if (num === 2) {
        if (this.approveSetting) {
          this.getApproveHistoryHttp()
        }
      }
    },
    getApproveHistoryHttp() {
      const params = {
        procDefKey: this.approveSetting.procDefKey,
        businessKey: this.approveSetting.businessKey
      }
      getApproveHistory(params).then(response => {
        if (response.success) {
          if (response.data) {
            this.historyData = response.data
          }
        }
      })
    },
    hiden() {
      this.showEdit = false
      document.body.style.overflow = 'initial'
    },
    hidden() {
      this.hiden()
    },
    show(scope) {
      if (this.approveSetting) {
        this.getApproveHistoryHttp()
      }
      this.clearValue()
      if (scope.row) {
        this.userId = scope.row.userId
        this.form = { ...scope.row }
      } else {
        this.userId = scope.userId
        this.form = { ...scope }
      }
      this.showDom()
      this.actionTitle = '确定'
    },
    showDom() {
      this.showEdit = true
      document.body.style.overflow = 'hidden'
    },
    clearValue() {
      this.form = {}
    },
    sure() {
      delete this.form['_orgid']
      this.validate()
    },
    doCustomEvent(item) {
      if (item.validate === false) {
        item.click(this.form)
        return
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          item.click(this.form)
        } else {
          this.$message({
            message: '请按照正确的格式填写表单',
            type: 'error'
          })
          return false
        }
      })
    },
    validate() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit('formSubmit', this.form, this.editForm)
        } else {
          this.$message({
            message: '请按照正确的格式填写表单',
            type: 'error'
          })
          return false
        }
      })
    }
  },
  watch: {
    form: {
      handler: function(v, oldV){
        if (this.editForm) {
          this.editForm.forEach(v => {
            if (v.formChange) {
              v.formChange(this.form, v, this.editForm)
            }
            if (v.showEditSituation) {
              const showItem = v.showEditSituation(this.form, v, oldV)
              v.hideEdit = !showItem
            }
          })
        }
      },
      deep: true
    }
  },
  mounted: function() {
    if (this.editForm) {
      this.editForm.forEach(v => {
        if (v.itemChange) {
          v.itemChange(this.form)
        }
      })
    }
  },
  computed: {
    editFormFilter: function() {
      if (this.editForm) {
        return this.editForm.filter((v) => {
          if (v.showEditSituation) {
            const showItem = v.showEditSituation(this.form)
            v.hideEdit = !showItem
          }
          if (v.type) {
            return true
          }
        })
      }
    }
  }

}
</script>

<style scoped>
.table-mask{
  z-index: 2003;
}
.table-form-tabs{
  position: relative;
  top: -17px;
}
.table-form-tabs>div{
  float: left;
  padding: 6px 4px;
  cursor: pointer;
}
.table-form-tabs>.active{
  color: #0099ff;
  border-bottom: 2px solid #0099ff;
}

.history-item{
  margin-top: 16px;
  border: 1px dotted #eee;
  background: #fefefe;
}
.history-item>div{
  padding: 16px 16px;
}
.history-nodata{
  width: 128px;
  margin: 0 auto;
  margin-top: 100px;
}
</style>
